<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <el-form
        :model="searchForm"
        ref="searchFormRef"
        label-width="100px"
        :inline="true"
        size="small"
      >
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.GoodsName" clearable></el-input>
        </el-form-item>
        <el-form-item label="店铺编号">
          <el-input v-model="searchForm.ShopId" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select
            v-model="searchForm.GoodsTypeId"
            placeholder="请选择"
            @change="handleaCode"
            clearable
          >
            <el-option
              v-for="item in aList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-select v-model="searchForm.bCode" placeholder="请选择" @change="handlebCode" clearable>
            <el-option
              v-for="item in bList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-select v-model="searchForm.cCode" placeholder="请选择" @change="handlecCode" clearable>
            <el-option
              v-for="item in cList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-select v-model="searchForm.dCode" placeholder="请选择" clearable>
            <el-option
              v-for="item in dList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.Status" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.Text"
              :value="item.Value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-date-picker
            v-model="selectTimeArr"
            type="daterange"
            range-separator="~"
            start-placeholder="开始更新时间"
            end-placeholder="结束更新时间"
            value-format="yyyy-MM-dd"
            @change="selectTime"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="searchForm.MinPrice" placeholder="请输入最小价格" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.MaxPrice" placeholder="请输入最大价格" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
          <el-button icon="el-icon-delete" @click="handleClear">重置</el-button>
        </el-form-item>
      </el-form>
      <avue-crud
        ref="crud"
        :option="tableOption"
        :data="list"
        :page="page"
        v-model="form"
        :table-loading="listLoading"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        @selection-change="selectionChange"
        @refresh-change="refreshChange"
      >
        <!-- 左上侧 -->
        <template slot="menuLeft">
          <el-button
            v-if="menuPermissions_btn_shelf_yes"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            :disabled="menuPermissions_detail_yes"
            @click="handleShelfYes"
          >管理员批量上架</el-button>
          <el-button
            v-if="menuPermissions_btn_shelf_no"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            :disabled="menuPermissions_detail_no"
            @click="handleShelfNo"
          >管理员批量下架</el-button>
          <el-button
            v-if="menuPermissions_btn_check_yes"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            :disabled="menuPermissions_check_yes"
            @click="handleCheckYes"
          >批量审核通过</el-button>
          <el-button
            v-if="menuPermissions_btn_check_no"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            :disabled="menuPermissions_check_no"
            @click="handleCheckNo"
          >批量审核不通过</el-button>
        </template>
        <!-- 规格 -->
        <template slot="Spec" slot-scope="scope">
          <span style="color:#78b4f1" @click="handleSize(scope.row)">规格查看</span>
        </template>
        <!-- 商品图片 -->
        <template slot="ImgUrl" slot-scope="scope">
          <a :href="imgsUrl+scope.row.ImgUrl" target="_blank" style="outline:none;">
            <img
              style="width: 100%; height: auto;"
              :src="imgsUrl+scope.row.ImgUrl"
              alt
            />
          </a>
        </template>
        <!-- 商品名称 -->
        <template slot="GoodsName" slot-scope="scope">
          <span style="color:#78b4f1;" @click="handleDetail(scope.row)">{{scope.row.GoodsName}}</span>
        </template>
        <!-- 菜单栏 -->
        <template slot="menu" slot-scope="scope">
          <el-button
            v-if="menuPermissions_btn_edit"
            type="text"
            size="small"
            icon
            @click="handleCheck(scope.row, scope.index)"
          >审核</el-button>
          <el-button
            v-if="menuPermissions_btn_del"
            type="text"
            size="small"
            icon
            @click="handlePrice(scope.row, scope.index)"
          >价格记录</el-button>
          <el-button
            v-if="menuPermissions_btn_del"
            type="text"
            size="small"
            icon
            @click="handleOperate(scope.row, scope.index)"
          >操作记录</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <!-- 审核 -->
    <el-dialog :visible.sync="checkVisible" title="审核" width="60%" @close="checkItemVisible">
      
      <check :Id="manageId" @sendData="sendData"></check>
      <div>
        <!--  审核意见：
        <input type="text" v-model="suggest" style="margin-bottom:10px;" placeholder="请输入审核意见" />-->
        <el-form>
          <el-form-item label="审核意见：">
            <el-input type="textarea" rows="5" v-model="suggest" placeholder="请输入审核意见" />
          </el-form-item>
        </el-form>
        <!-- 上传示意图 多张上传-->
        <el-upload
          :action="uploadUrl"
          :headers="myHeaders"
          :on-preview="handlePreviewCheckPic"
          :on-remove="handleRemoveCheckPic"
          :on-success="handleSuccessCheckPic"
          :file-list="fileListCheckPic"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
          <!-- <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过1M，商品详情图您最多可以上传15张
          </div>-->
        </el-upload>
        <el-dialog :visible.sync="checkPicDialogVisible">
          <img width="100%" :src="checkPicDialogImageUrl" alt="示意图" />
        </el-dialog>
      </div>
      <br />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isCheck">审核通过</el-button>
        <el-button @click="isCheckNo">审核不通过</el-button>
      </span>
    </el-dialog>
    <!-- 批量审核通过/批量审核不通过-->
    <el-dialog
      :visible.sync="bitchCheckYesVisible"
      :title="titleCheck[dialogCheckStatus]"
      width="60%"
      @close="checkYesItemVisible"
    >
      <el-form>
        <el-form-item label="审核意见：">
          <el-input type="textarea" rows="5" v-model="advice" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bitchCheckYes">确定</el-button>
        <el-button icon @click="bitchCheckYesVisible = fasle">取消</el-button>
      </span>
    </el-dialog>
    <!-- 批量上架/下架 -->
    <el-dialog
      :visible.sync="bitchShelfYesVisible"
      :title="titleMap[dialogStatus]"
      width="60%"
      @close="shelfYesItemVisible"
    >
      <el-form>
        <el-form-item label="备注：">
          <el-input type="textarea" rows="5" v-model="remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bitchShelf">确定</el-button>
        <el-button icon @click="bitchShelfYesVisible = fasle">取消</el-button>
      </span>
    </el-dialog>
    <!-- 规格查看 -->
    <el-dialog
      :visible.sync="watchSizeVisible"
      title="规格查看"
      width="60%"
      @close="watchSizeItemVisible"
    >
      <watch-size :Id="sizeId"></watch-size>
    </el-dialog>
    <!-- 操作记录 -->
    <el-dialog
      :visible.sync="operateRecordVisible"
      title="操作记录"
      width="60%"
      @close="operateRecordItemVisible"
    >
      <operate-record :Id="operateId"></operate-record>
    </el-dialog>
    <!-- 商品详情页 -->
    <el-dialog :visible.sync="detailVisible" title="商品详情页" width="60%" @close="detailItemVisible">
      <check :Id="manageId"></check>
    </el-dialog>
    <!-- 价格记录 -->
    <el-dialog :visible.sync="priceVisible" title="价格记录" width="60%" @close="priceItemVisible">
      <price-record :Id="priceRecordId"></price-record>
    </el-dialog>
  </div>
</template>

<script>
import store from "@/store";
import setting from "@/setting";
import { getCategoryType } from "@/api/platProduct/category";
import {
  getManagementList,
  getManagementStatus,
  checkApi,
  shelfApi,
} from "@/api/platProduct/management";
import { tableOption } from "@/const/crud/platProduct/product-management";
import check from "./productCheck";
import watchSize from "./watchSizeList";
import operateRecord from "./operateRecord";
import priceRecord from "./priceRecord";
import { mapGetters } from "vuex";
export default {
  name: "productManagement",
  data() {
    return {
      imgsUrl: setting.apiUrl,
      searchForm: {
        GoodsName: "",
        ShopId: "",
        GoodsTypeId: "",
        bCode: "",
        cCode: "",
        dCode: "",
        Status: "",
        DateStart: "",
        DateEnd: "",
        MinPrice: "",
        MaxPrice: "",
      },
      selectTimeArr: [],
      tableOption: tableOption,
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      list: [],
      form: {},
      listLoading: false,
      menuPermissions_btn_add: true,
      menuPermissions_btn_edit: true,
      menuPermissions_btn_del: true,
      //状态
      statusList: [],
      //分类下拉框
      aList: [],
      bList: [],
      cList: [],
      dList: [],
      code: "", //存放上次的code
      //审核
      checkVisible: false,
      manageId: "",
      GoodsIds: [],

      //上传示意图
      uploadUrl: setting.uploadUrl,
      fileListCheckPic: [],
      checkPicDialogImageUrl: "", // 示意图路径
      checkPicDialogVisible: false,
      checkImgUrls: [],
      suggest: "",
      myHeaders: {
        Authorization: "",
      },
      sendDatas: null,

      //批量审核通过/批量审核不通过
      menuPermissions_btn_check_yes: true,
      menuPermissions_btn_check_no: true,
      menuPermissions_check_yes: true,
      menuPermissions_check_no: true,
      titleCheck: {
        checkUp: "批量审核通过",
        checkDown: "批量审核不通过",
      },
      bitchCheckYesVisible: false,
      advice: "",
      dialogCheckStatus: "", //批量审核通过/批量审核不通过弹框标题
      checkStatus: "", //批量审核通过/批量审核不通过请求状态

      //上架/下架
      bitchShelfYesVisible: false,
      menuPermissions_btn_shelf_yes: true,
      menuPermissions_btn_shelf_no: true,
      menuPermissions_detail_yes: true,
      menuPermissions_detail_no: true,
      remark: "",
      titleMap: {
        shelfUp: "批量上架",
        shelfDown: "批量下架",
      },
      dialogStatus: "", //上架和下架弹框标题
      shelfStatus: "", //上架和下架请求状态

      //规格查看
      watchSizeVisible: false,
      sizeId: "",

      //操作记录
      operateRecordVisible: false,
      operateId: "",
      //商品详情页
      /*  checkTitle: "审核",
      detailTitle: "商品详情页", */
      detailVisible: false,

      //价格记录
      priceRecordId: "",
      priceVisible: false,
    };
  },
  components: {
    check,
    watchSize,
    operateRecord,
    priceRecord,
  },
  created() {
    this.getStatus();
    this.getCategoryTypeOne(0);
    const token = store.getters.access_token;
    this.myHeaders.Authorization = "Bearer " + token;
  },
  computed: {
    ...mapGetters(["elements", "permissions"]),
  },
  watch: {
    manageId() {
      this.suggest = "";
      this.checkImgUrls = [];
      this.fileListCheckPic = [];
    },
  },
  methods: {
    /*     expandChange(row, expendList) {
      this.$message.success("展开回调");
    }, */
    //获取分类下拉框信息
    //一级
    getCategoryTypeOne(ID) {
      let params = {
        ParentId: ID,
        SelectId: "",
      };
      getCategoryType(params)
        .then((res) => {
          if (res.data.code == 0) {
            let data = res.data.data;
            let dicData = [];
            data.forEach((ele) => {
              var obj = {
                label: ele.Text,
                value: ele.Value,
              };
              dicData.push(obj);
            });
            this.aList = dicData;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //二级
    handleaCode(value) {
      // 修改选项时操作
      if (value !== this.code) {
        //判断是否是上次的值，不是的话就清空二级的select
        this.code = value; //把现在的值在赋值上
        this.searchForm.bCode = "";
        this.searchForm.cCode = "";
        this.searchForm.dCode = "";
      }
      if (value == "") {
        this.searchForm.bCode = "";
      }
      if (value.length === 0) {
        //如果一级的code为空的话就直接不执行下面的函数
        return;
      }
      let params = {
        ParentId: value,
        SelectId: "",
      };
      getCategoryType(params)
        .then((res) => {
          if (res.data.code == 0) {
            let data = res.data.data;
            let dicData = [];
            data.forEach((ele) => {
              var obj = {
                label: ele.Text,
                value: ele.Value,
              };
              dicData.push(obj);
            });
            this.bList = dicData;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //三级
    handlebCode(value) {
      // 修改选项时操作
      if (value !== this.code) {
        //判断是否是上次的值，不是的话就清空二级的select
        this.code = value; //把现在的值在赋值上
        this.searchForm.cCode = "";
        this.searchForm.dCode = "";
      }
      if (value.length === 0) {
        //如果一级的code为空的话就直接不执行下面的函数，也就是省份和城市都为空
        return;
      }
      let params = {
        ParentId: value,
        SelectId: "",
      };
      getCategoryType(params)
        .then((res) => {
          if (res.data.code == 0) {
            let data = res.data.data;
            let dicData = [];
            data.forEach((ele) => {
              var obj = {
                label: ele.Text,
                value: ele.Value,
              };
              dicData.push(obj);
            });
            this.cList = dicData;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //四级
    handlecCode(value) {
      // 修改选项时操作
      if (value !== this.code) {
        //判断是否是上次的值，不是的话就清空二级的select
        this.code = value; //把现在的值在赋值上
        this.searchForm.dCode = "";
      }
      if (value.length === 0) {
        //如果一级的code为空的话就直接不执行下面的函数，也就是省份和城市都为空
        return;
      }
      let params = {
        ParentId: value,
        SelectId: "",
      };
      getCategoryType(params)
        .then((res) => {
          if (res.data.code == 0) {
            let data = res.data.data;
            let dicData = [];
            data.forEach((ele) => {
              var obj = {
                label: ele.Text,
                value: ele.Value,
              };
              dicData.push(obj);
            });
            this.dList = dicData;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    //状态下拉框
    getStatus() {
      getManagementStatus()
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              this.statusList = res.data.data;
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //查询时间数据
    selectTime() {
      if (this.selectTimeArr) {
        this.searchForm.DateStart = this.selectTimeArr[0];
        this.searchForm.DateEnd = this.selectTimeArr[1];
      } else {
        this.searchForm.DateStart = null;
        this.searchForm.DateEnd = null;
      }
    },
    getList(page) {
      let _param = {
        GoodsName: this.searchForm.GoodsName,
        ShopId: this.searchForm.ShopId,
        GoodsTypeId:
          this.searchForm.dCode ||
          this.searchForm.cCode ||
          this.searchForm.bCode ||
          this.searchForm.GoodsTypeId ||
          "",
        Status: this.searchForm.Status,
        DateStart: this.searchForm.DateStart,
        DateEnd: this.searchForm.DateEnd,
        MinPrice: this.searchForm.MinPrice,
        MaxPrice: this.searchForm.MaxPrice,
      };
      let _jsonData = Object.assign(_param, {
        page: page.currentPage,
        limit: page.pageSize,
      });
      this.listLoading = true;
      getManagementList(_jsonData)
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              /*  res.data.data.Data.forEach((item)=>{
                this.$set(item,'Spec',1);
              }) */
              this.list = res.data.data.Data;
              this.page.total = res.data.data.Cnt;
              this.listLoading = false;
            }
          }
        })
        .catch((error) => {
          console.log(error);
          this.listLoading = false;
        });
    },
    searchChange() {
      this.page.currentPage = 1;
      this.getList(this.page);
    },
    handleClear() {
      this.selectTimeArr = [];
      this.searchForm = {};
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    refreshChange() {
      this.getList(this.page);
    },

    //审核
    handleCheck(row) {
      this.checkVisible = true;
      this.manageId = row.Id;
    },
    checkItemVisible() {
      this.checkVisible = false;
      this.suggest = "";
      this.checkImgUrls = [];
      this.fileListCheckPic = [];
    },
    /*    closeDialog(data) {
      this.checkVisible = data;
      this.getList(this.page);
    }, */
    sendData(sendData) {
      this.sendDatas = sendData;
    },
    // 示意图上传前操作
    handlePreviewCheckPic(file) {
      this.checkPicDialogImageUrl = file.url;

      this.checkPicDialogVisible = true;
    },
    // 示意图删除操作
    handleRemoveCheckPic(file) {
      let currentImg = file.response.data;
      this.checkImgUrls = this.checkImgUrls.filter(
        (item) => item != currentImg
      );
    },
    // 示意图上传成功
    handleSuccessCheckPic(response, file, fileList) {
      if (response.code === 0) {
        let imgurls = response.data;
        this.checkImgUrls.push(imgurls);
      }
    },
    //审核通过
    isCheck() {
      let GoodsIds = [];
      GoodsIds.push(this.sendDatas.GoodsId);
      let _send = {
        GoodsIds: GoodsIds,
        Status: 1,
        CheckRemark: this.suggest,
        CheckImgUrls: this.checkImgUrls,
      };
      checkApi(_send)
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              this.$message.success(res.data.msg);
              this.getList(this.page);
              this.checkVisible = false;
              this.suggest = "";
              this.checkImgUrls = [];
              this.fileListCheckPic = [];
              // this.$emit("closeDialog", false);
            }
          }
        })
        .catch((error) => {
          console.log(error);
          this.checkVisible = false;
          this.suggest = "";
          this.checkImgUrls = [];
          this.fileListCheckPic = [];
        });
    },
    //审核不通过
    isCheckNo() {
      let GoodsIds = [];
      GoodsIds.push(this.sendDatas.GoodsId);
      let _send = {
        GoodsIds: GoodsIds,
        Status: 2,
        CheckRemark: this.suggest,
        CheckImgUrls: this.checkImgUrls,
      };
      checkApi(_send)
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              this.$message.success(res.data.msg);
              this.getList(this.page);
              this.checkVisible = false;
              this.suggest = "";
              this.checkImgUrls = [];
              this.fileListCheckPic = [];
              // this.$emit("closeDialog", false);
            }
          }
        })
        .catch((error) => {
          console.log(error);
          this.checkVisible = false;
          this.suggest = "";
          this.checkImgUrls = [];
          this.fileListCheckPic = [];
        });
    },
    //选中
    selectionChange(selection) {
      if (selection.length > 0) {
        this.menuPermissions_check_yes = false;
        this.menuPermissions_check_no = false;
        this.menuPermissions_detail_yes = false;
        this.menuPermissions_detail_no = false;
        this.GoodsIds = [];
        selection.forEach((element) => {
          this.GoodsIds.push(element.Id);
        });
      } else {
        this.GoodsIds = [];
        this.menuPermissions_check_yes = true;
        this.menuPermissions_check_no = true;
        this.menuPermissions_detail_yes = true;
        this.menuPermissions_detail_no = true;
      }
    },
    //批量审核通过/批量审核不通过
    handleCheckYes() {
      this.bitchCheckYesVisible = true;
      this.dialogCheckStatus = "checkUp";
      this.checkStatus = 1;
    },
    handleCheckNo() {
      this.bitchCheckYesVisible = true;
      this.dialogCheckStatus = "checkDown";
      this.checkStatus = 2;
    },
    checkYesItemVisible() {
      this.bitchCheckYesVisible = false;
      this.advice = "";
    },
    bitchCheckYes() {
      let _send = {
        GoodsIds: this.GoodsIds,
        Status: this.checkStatus,
        CheckRemark: this.advice,
      };
      checkApi(_send)
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              this.$message.success(res.data.msg);
              this.advice = "";
              this.bitchCheckYesVisible = false;
              this.getList(this.page);
            }
          }
        })
        .catch((error) => {
          console.log(error);
          this.advice = "";
          this.bitchCheckYesVisible = false;
        });
    },
    //上架/下架
    handleShelfYes() {
      this.bitchShelfYesVisible = true;
      this.dialogStatus = "shelfUp";
      this.shelfStatus = 1;
    },
    handleShelfNo() {
      this.bitchShelfYesVisible = true;
      this.dialogStatus = "shelfDown";
      this.shelfStatus = 4;
    },
    bitchShelf() {
      let _send = {
        GoodsIds: this.GoodsIds,
        Status: this.shelfStatus,
        Remark: this.remark,
      };
      shelfApi(_send)
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              this.$message.success(res.data.msg);
              // this.remark = "";
              this.bitchShelfYesVisible = false;
              this.getList(this.page);
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    shelfYesItemVisible() {
      this.bitchShelfYesVisible = false;
      this.remark = "";
    },
    //规格查看
    handleSize(row) {
      this.watchSizeVisible = true;
      this.sizeId = row.Id;
    },
    watchSizeItemVisible() {
      this.watchSizeVisible = false;
    },
    //操作记录
    handleOperate(row) {
      this.operateRecordVisible = true;
      this.operateId = row.Id;
    },
    operateRecordItemVisible() {
      this.operateRecordVisible = false;
    },
    //商品详情页
    handleDetail(row) {
      this.detailVisible = true;
      this.manageId = row.Id;
    },
    detailItemVisible() {
      this.detailVisible = false;
    },
    //价格记录
    handlePrice(row) {
      this.priceVisible = true;
      this.priceRecordId = row.Id;
    },
    priceItemVisible() {
      this.priceVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
// ::v-deep .avue-crud__tip.el-tag.el-tag--small.el-tag--light {
//     display: none !important;
// }
</style>